<!-- 首页的nav部分 -->
<template>
  <nav class="index-nav">
    <router-link to="./classify">
      <div class="nav-item">
        <i class="iconfont icon-icon_addmessage"></i>
        <p class="nav-text font-24">分类</p>
      </div>
    </router-link>
    <router-link to="./ranking">
      <div class="nav-item">
        <i class="iconfont icon-icon_addresslist"></i>
        <p class="nav-text font-24">排行</p>
      </div>
    </router-link>
    <router-link to="./vip">
      <div class="nav-item">
        <i class="iconfont icon-icon_addressbook"></i>
        <p class="nav-text font-24">VIP专区</p>
      </div>
    </router-link>
    <router-link to="./looked/history">
      <div class="nav-item">
        <i class="iconfont icon-icon_at"></i>
        <p class="nav-text font-24">历史</p>
      </div>
    </router-link>
  </nav>
</template>

<script>
export default {
  name: 'IndexNav'
}
</script>
<style lang="less" scoped>
.index-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  width: 356px;
  margin: 0 auto;
  padding: 0 10px;
  //下边框线
  position: relative;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #e9e9e9;
    transform: scaleY(0.5);
  }
  .nav-item {
    .iconfont {
      font-size: 52px;
      line-height: 1.2;
    }
    .nav-text {
      color: #8d8d8d;
      font-weight: 500;
      text-align: center;
    }
  }
}
</style>
